<template>
  <el-dialog v-model="visible" :close-on-click-modal="false" destroy-on-close width="60%" @close="closeMatter" title="极简事项">
<!--    <el-form :model="formData" :rules="formRules" size="small" :inline="false" label-width="100px" ref="formRef">
      <el-form-item label="主题" prop="title">
        <el-input v-model="formData.title" placeholder="请填写主题" maxlength="32" size="small"/>
      </el-form-item>
      <el-form-item label="描述" prop="content">
        <editor v-model="formData.content" height="160px"/>
      </el-form-item>
      <el-form-item label="行动时间">
        <div style="max-width: 400px">
          <el-date-picker
              v-if="dateType"
              v-model="dateTime"
              style="width: 100%"
              type="datetimerange"
              range-separator="至"
              start-placeholder="行动开始时间"
              end-placeholder="行动结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="selectTime"
          />
          <el-date-picker
              v-else
              v-model="formData.actionStartTime"
              type="datetime"
              style="width: 100%"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择行动时间"
          />
        </div>
        <el-button style="margin-left: 10px" plain :icon="Refresh" @click="dateType = !dateType"/>
      </el-form-item>
      <el-form-item label="执行人" prop="executorIds">
        <el-select v-model="formData.executorIds" placeholder="请选择执行人" size="small" multiple filterable @change="executorChange">
          <el-option v-for="item in enterpriseUsers" :key="item.userId" :value="item.userId" :label="item.nickname"/>
        </el-select>
      </el-form-item>
      <el-form-item label="关联">
        <module-relate :relate-items="formData.relateItems"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请填写备注" type="textarea" :rows="3"/>
      </el-form-item>
      <el-form-item label="优先度">
        <el-radio-group v-model="formData.priority" size="small">
          <el-radio :label="0" size="small">普通</el-radio>
          <el-radio :label="1" size="small">高</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="通知时间" prop="remindState">
        <el-radio-group v-model="formData.remindState">
          <el-radio v-for="item in remindTimes" :key="item.value" :label="item.value" size="small">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="通知方式" prop="remindType">
        <el-checkbox-group v-model="formData.remindType" size="small">
          <el-checkbox label="1">应用、公众号通知</el-checkbox>
          <el-checkbox label="2">短信通知</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form> -->
    <minimalism-form ref="form" :enterpriseUsers="enterpriseUsers" :code="code" :relateItem="relateItem" :remindTimes="remindTimes" launch="1"></minimalism-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="closeMatter">关闭</el-button>
          <el-button size="small" type="primary" @click="submitData(form)">提交</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script>
// 极简事项
import {computed, reactive, toRefs, ref} from 'vue'
import Cookies from 'js-cookie'
import MinimalismForm from '/@/views/matter/components/MinimalismForm.vue'
// import Editor from '/@/components/editor/index.vue'
// import ModuleRelate from '/@/views/matter/components/ModuleRelate.vue'
import {ElMessage} from 'element-plus'
// import {Refresh} from '@element-plus/icons-vue'
import {formatDate} from '/@/utils/formatTime'
import {createMatterJust} from '/@/api/matter'

export default {
  name: 'Minimalism',
  emits: ['update:code'],
  components: {
    MinimalismForm
  },
  props: {
    code: {
      type: String,
      default: ''
    },
    relateItem: {
      type: Object,
      default: null
    },
    enterpriseUsers: {
      type: Array,
      default: []
    },
    remindTimes: {
      type: Array,
      default: []
    }
  },
  setup(props, context) {
    const form = ref()
    const {code, relateItem, enterpriseUsers, remindTimes} = toRefs(props)
    let visible = computed({
      get: () => {
        let flag = code.value == 'MINIMALISM'
        // if (flag) {
        //   // 默认带入自己
        //   state.selfId = Cookies.get('userId')
        //   state.formData.executorIds = [state.selfId]
        //   // 行动时间默认现在
        //   let nowTime = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS')
        //   state.formData.actionStartTime = nowTime
        //   state.dateTime = [nowTime, nowTime]
        //   if (relateItem.value) {   // 关联项带入
        //     state.formData.relateItems = [relateItem.value]
        //   }
        // }
        return flag
      },
      set: val => context.emit('update:code', val ? 'MINIMALISM' : '')
    })
    // const state = reactive({
    //   formData: {
    //     title: '极简',
    //     content: '',
    //     executorIds: [],
    //     priority: 0,
    //     remindState: 'NONE',
    //     remindType: [],
    //     remark: null,
    //     relateItems: [],
    //     actionStartTime: null,
    //     actionEndTime: null,
    //     type: 'MINIMALISM'  // 事项类型编码
    //   },
    //   formRules: {
    //     title: {required: true, message: '请填写事项主题', trigger: 'blur'},
    //     content: {required: true, message: '请填写事项描述', trigger: 'blur'},
    //     executorIds: {required: true, message: '请选择执行人', trigger: 'change'}
    //   },
    //   dateType: false,  // 行动时间范围/单体切换
    //   dateTime: [],
    //   selfId: null
    // })

    // const selectTime = (val) => {
    //   if (val && val.length === 2) {
    //     state.formData.actionStartTime = val[0]
    //     state.formData.actionEndTime = val[1]
    //   } else {
    //     state.formData.actionStartTime = state.formData.actionEndTime = null
    //   }
    // }
    // const executorChange = (val) => {
    //   if (!val.includes(state.selfId)) {
    //     state.formData.executorIds.push(state.selfId)
    //     ElMessage.warning('本人必须在执行人中，无法移除')
    //   }
    // }
    /**
     * 提交事项
     */
    const submitData = (formEl) => {
      // formEl.validate(valid => {
      //   if (!valid) {
      //     return false
      //   }
      // const params = JSON.parse(JSON.stringify(state.formData))
      // params.remindType = params.remindType && params.remindType.length > 0 ? params.remindType + '' : ''
      //   createMatterJust(params).then(res => {
      //     if (res.data) {
      //       ElMessage.success('提交成功！')
      //       closeMatter()
      //     }
      //   }).catch(e => console.log(e))
      // })
      form.value.submit()
    }
    const closeMatter = () => {
      context.emit('update:code', '')
      form.value.reset()
    }

    return {
      form,
      // ...toRefs(state),
      // selectTime,
      // executorChange,
      // Refresh,
      visible,
      submitData,
      closeMatter,
      // enterpriseUsers,
      // remindTimes
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
